<template>
  <div>
    <!--    布局，左右结构，左侧可以选日期，选择后在下面列表录像列表，点击录像列表，在右侧显示一个视频，帮我生成代码
    -->
    <el-row>
      <el-col :span="6">
        <el-row>
          <el-col :span="12">
            <el-date-picker
              v-model="selectedDate"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              @change="handleDateChange"
            />
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="max-height: 700px;overflow-y:auto">
            <!--              加行的点击事件-->
            <el-table :data="recordFiles" border stripe @row-click="playRecord">
              <el-table-column prop="startTime" label="开始" />
              <el-table-column prop="endTime" label="结束" />
            </el-table>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="18">
        <div class="player-container">
          <div id="glplayer" class="glplayer" />
        </div>
        <div>
          {{ mrl }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { sendGbRecordListCommand, getGbRecordList } from '@/api/channel'
import moment from 'moment'
import { Player } from '@/utils/executor'

const TAG = '[remoteRecord]'
export default {
  name: 'RemoteRecord',
  data() {
    return {
      listQuery: {
        deviceId: '',
        channelId: '',
        page: 1,
        limit: 20
      },
      list: [],
      total: 0,
      listLoading: false,
      // 默认选中今天
      selectedDate: moment().format('YYYY-MM-DD'),
      recordFiles: [],
      // 当前在播放
      currentMrl: '',
      mrl: '',
      instance: null,
      playing: false,
      fps: 0,
      isHEVC: false,
      size: { width: 0, height: 0 },
      videoCodec: ''
    }
  },
  // 页面显示事件
  created() {
    console.info(TAG, '页面参数', this.$route.query)
    this.listQuery.deviceId = this.$route.query.deviceId
    this.listQuery.channelId = this.$route.query.channelId
  },
  methods: {
    async search() {
      this.listQuery.page = 1
      await this.fetchData()
    },
    handleDateChange() {
      console.info(TAG, 'changeDate', this.selectedDate)
    },
    async fetchData() {
      this.listLoading = true
      this.listQuery.date = this.selectedDate
      // 通过日期计算开始与结束时间，使用moment.js，开始是今天的0点，结束是明天的0点
      const startTime = moment(this.selectedDate).format('YYYY-MM-DD 00:00:00')
      const endTime = moment(this.selectedDate).add(1, 'days').format('YYYY-MM-DD 00:00:00')
      this.listQuery.startTime = startTime
      this.listQuery.endTime = endTime

      const ret = await sendGbRecordListCommand(this.listQuery)
      // 等待3秒，再去获取录像列表
      const that = this
      setTimeout(async() => {
        const files = await getGbRecordList({ SN: ret.data.SN })
        that.recordFiles = files.data
        console.info(TAG, '录像列表', files)
      }, 2000)
    },
    playRecord(row) {
      console.info(TAG, '初始化播放器', row)
      const that = this
      const player = new Player()
      this.mrl = row.flv
      player.init(this.mrl)
      that.instance = player.instance

      player.instance.onLoadFinish = () => {
        const mediaInfo = player.instance.mediaInfo()
        console.log(TAG, 'onLoadFinish', mediaInfo)
        this.fps = mediaInfo.meta.fps
        this.isHEVC = mediaInfo.meta.isHEVC
        this.size = mediaInfo.meta.size
        this.videoCodec = mediaInfo.meta.videoCodec === 0 ? 'HEVC/H.265' : '其它'
        that.playing = true
      }
      player.instance.onPlayFinish = () => {
        console.log(TAG, 'onPlayFinish')
      }
      player.instance.do()
    }
  }
}
</script>

<style scoped>
</style>
